<script setup>
import {
    Menu as IconMenu,
    User,
    List,
    Files,
    Tickets
} from '@element-plus/icons-vue'
</script>
<template>
    <!-- 头部区域   -->
    <div style="height: 100px; line-height: 60px;background-color: white;">
        <img src="@/assets/tubiao.png" alt="" style="height: 100px; position: relative;top: 10px; left: 10px;">
        <span style="font-size: 24;">校园运动会管理系统</span>
    </div>
    <!-- 侧边栏和主体 -->
    <div style="display: flex;">
        <!-- 侧边栏导航 -->
        <!-- overflow: hidden;超出的部分隐藏掉 
       margin-right: 2px;设置间距
       text-align: center;文字居中显示-->
        <div style="width: 192.03px; overflow: hidden; margin-right: 2px; background-color: white;">
            <el-row class="tac">
                <el-col>
                    <h5 class="mb-2" style="text-align: center;">导航</h5>
                    <el-menu default-active="2" class="el-menu-vertical-demo">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item-group title="未参赛人员">
                                <el-menu-item index="1-1">一般用户</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="比赛参与人员">
                                <el-menu-item index="1-2">裁判员</el-menu-item>
                                <el-menu-item index="1-3">运动员</el-menu-item>
                            </el-menu-item-group>

                        </el-sub-menu>
                        <el-menu-item index="2">
                            <el-icon><icon-menu /></el-icon>
                            <span>报名管理</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <el-icon>
                                <List />
                            </el-icon>
                            <span>基本信息管理</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <el-icon>
                                <Tickets />
                            </el-icon>
                            <span>赛事管理</span>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <el-icon>
                                <Files />
                            </el-icon>
                            <span>赛事信息管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>

            </el-row>
        </div>
        <!-- 主体数据 -->
        <div style="flex: 1; background-color: white;">

        </div>
    </div>

</template>
